<template>
  <!-- 商品分类 -->
  <div>
    <el-card>
      <div slot="header" class="catae_header">
        <span>商品分类</span>
        <el-button size="mini" type="primary" @click="handleEdit()">添加分类</el-button>
      </div>
      <div class="content">
        <el-table
          ref="singleTable"
          :data="tableData"
          highlight-current-row
          :style="{width:w+'px'}"
        >
          <el-table-column type="index" label="序号" width="100"></el-table-column>
          <el-table-column property="cateName" label="分类名称">
            <!-- 作用域插槽 -->
            <template slot-scope="scope">
               <span v-show="scope.row.isEdit===false">{{scope.row.cateName}}</span>
               <el-input v-model="scope.row.cateName" v-show="scope.row.isEdit===true" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="是否启用">
            <!-- 作用域插槽 -->
            <template slot-scope="scope">
            <el-switch
              v-model="scope.row.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :disabled="scope.row.isEdit==false?true:false"
              >
            </el-switch>
            </template>
          </el-table-column>
          <el-table-column  label="操作" width="180"> 
            <!-- 作用域插槽 -->
            <template slot-scope="scope">
             <el-button size="mini" :type="scope.row.isEdit==false?'primary':'success'" @click="editHandle(scope.row)">{{scope.row.isEdit==false?'编辑':'完成'}}</el-button>
             <el-button size="mini" type="danger"  @click="delHandel(scope.row.id)" >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <!-- @current-change  分页函数 -->
           <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
      </div>

    <!-- 添加商品分类---对话框 -->
    <el-dialog title="添加分类" :visible.sync="dialogFormVisible" >
      <el-form :model="form"  label-width="120px" :rules="rules" ref="form">
        <el-form-item label="分类名称" prop="cateName">
          <el-input v-model="form.cateName"  placeholder="分类名称"></el-input>
        </el-form-item>
            <el-form-item label="是否启用">
        <el-switch
          v-model="form.state"
          active-color="#13ce66"
          inactive-color="#ff4949">
        </el-switch>
              </el-form-item>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="formHandle"  size="mini">确 定</el-button>
      </div>
    </el-dialog>


      
    </el-card>
  </div>
</template>
 
<script>
//引入
import {cateList,editCate,goodsAddcate,goodsDelcate} from '@/api/goods'
export default {
  data(){
    return{
      tableData:[],//表格数据
      w:document.body.clientWidth-300,//表单宽度
      currentPage:1,//当前页
      total:0,//总条数
      pageSize:5,//每页条数
      dialogFormVisible: false, //控制模态框隐藏
      form:{//添加分类的数据
        cateName:"",
        state:true,
      },
      //添加商品分类验证规则
       rules: {
        cateName: [
          // message  提示商品分类
          { required: true, message: "请输入商品分类", trigger: "blur" },
          { min: 2, max: 10, message: "长度在 2 到 10 个字符", //错误提示
            trigger: "blur", //失去焦点触发
          },
        ],},
      
    }
  },
  //方法
  methods:{
    //处理表单自适应
    resizeHandle(){
      this.w=document.body.clientWidth-300;
    },
    //当前页发生改变
    handleCurrentChange(val){
      // console.log(val);  //打印显示具体哪个页面
      this.currentPage=val; //当前页重新赋值
      this.loadData(); //刷新    显示调用分页函数
    },
    async loadData(){
      let res =await cateList({currentPage:this.currentPage,pageSize:this.pageSize})
      let {total,data}=res;

      //给每一个对象,添加一个是否可以编辑的字段 默认值为false  false显示分类名字  true显示输入框
      // console.log(data);//打印结果
      data.forEach(val=>val.isEdit=false)
      
      this.total=total;//总条数
      this.tableData=data;//表格数据
    },
    //商品分类编辑
    async editHandle(row){
      //row  就是当行信息
      //第一次点击是编辑,第二次点击是完成  完成的时候发请求
      row.isEdit=!row.isEdit;
      
      if(!row.isEdit){
          if(!row.cateName==''){
          //响应成功的res
          let res =await editCate(row);
          // console.log(res);//响应的提示信息
          this.$message({
          type: "success",
          message: res.msg,
          });
        }else{
        this.$message.error("未修改商品分类名称");
        this.loadData();
        } 
      }
    },
    //添加商品分类
    handleEdit(){
      this.dialogFormVisible=true;
    },
    //对话框添加商品分类确定
    async formHandle(){
         this.$refs.form.validate(async (valid) => {
        //点击提交按钮  找到表单  用validate()方法  表单都有值就是true
         let {code,msg} =await goodsAddcate({cateName:this.form.cateName,state:this.form.state})
        // console.log(res);//添加分类响应参数
      if (valid) {
        if(code==0){
           this.$message({
              type:"success",
              message:msg,
            });
        this.dialogFormVisible=false//隐藏表单
        this.loadData(); //刷新调用分页函数
        }else this.$message.error(msg);
      }else this.$message.error("请输入商品分类");
      })
    },
    //删除商品分类
    async delHandel(id){
     this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
           let{code,msg} = await goodsDelcate(id)
          if(code===0){
            this.$message({
              type:"success",
              message:msg,
            });
          //刷新页面
             this.loadData();
            }else this.$message.error(msg);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
  },
  created(){
    //监听页面发生大小改变触发的事件 resize
    window.addEventListener("resize",this.resizeHandle);

    //调用分页函数
    this.loadData();
  },
  //销毁之前
   beforeDestroy(){
     //注销页面发生改变大小事件
      window.removeEventListener("resize",this.resizeHandle)
   }
};
</script> 

<style lang="less" scoped>
.catae_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
// 分页
.el-pagination{
  margin: 20px 0;
}
//添加分类
.el-form{
  padding-right: 30px;
}

.dialog-footer{
  margin-right: 30px;
}
</style>